<template>
  <div>
    <div class="my_div" v-for="item in dogList" :key="item.id">
      <img :src="item.dogImgUrl" alt="" />
      <p>{{ item.dogName }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dogList: [
        {
          dogImgUrl:
            'https://img0.baidu.com/it/u=39305734,3326886681&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1666976400&t=33fe3fb4e8153382e4b8a3ed36ae5a6b',
          dogName: '博美',
        },
        {
          dogImgUrl:
            'https://img0.baidu.com/it/u=1617290168,3097121268&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1666976400&t=f12979a796105fabda07e8df6a8af059',
          dogName: '泰迪',
        },
        {
          dogImgUrl:
            'https://img2.baidu.com/it/u=3435293137,922021059&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1666976400&t=32f1faac18068ad722b0cf2ea65c2613',
          dogName: '金毛',
        },
        {
          dogImgUrl:
            'https://img2.baidu.com/it/u=2524788070,524264798&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1666976400&t=979219488e00089467af22377d61f329',
          dogName: '哈士奇',
        },
        {
          dogImgUrl:
            'https://img1.baidu.com/it/u=1770429533,2003759790&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1666976400&t=ccdffeb7932f4695ad21dddadaf44f39',
          dogName: '阿拉斯加',
        },
        {
          dogImgUrl:
            'https://img2.baidu.com/it/u=3278253107,2341737719&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1666976400&t=c7a8ed2f6f74fe05834feef771038a5f',
          dogName: '萨摩耶',
        },
      ],
    }
  },
}
</script>

<style>
.my_div {
  width: 200px;
  border: 1px solid black;
  text-align: center;
  float: left;
}

.my_div img {
  width: 100%;
  height: 200px;
}
</style>
